import {
  Button,
  Form,
  FormItem,
  Image,
  Input,
  InputNumber,
  message,
  Modal,
  notification,
  Space,
  TypographyText
} from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { cinemaApi } from '@/apis'
import { BannerItem } from '@/apis/cinemaTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { useDialog } from '@/hooks'

export default defineComponent({
  name: 'MovieIndexBanner',
  setup() {
    const curOptionItem = ref({} as BannerItem)
    const showDialog = ref(false)
    const dialogLoading = ref(false)
    const syncLoading = ref(false)
    const { showConfirm } = useDialog()

    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              slots: {
                default: 'addStyle'
              }
            }
          ]
        },
        columns: [
          {
            title: '电影名称',
            field: 'movieName',
            minWidth: 100
          },
          {
            title: '图片',
            field: 'img',
            width: 200,
            slots: {
              default: 'bannerImage'
            }
          },
          {
            title: '排序',
            minWidth: 100,
            field: 'sort'
          },
          {
            title: '状态',
            field: 'status',
            fixed: 'right',
            width: 100,
            slots: {
              default: 'status'
            }
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 180
          }
        ],
        proxyConfig: {
          props: {
            result: 'data'
          },
          ajax: {
            query: async () => {
              const data = await cinemaApi.getMoiveBannerList()
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //刷新
    async function refresh() {
      await tableRef.value.table.commitProxy('query')
    }

    //设置排序
    function handleSort(item) {
      curOptionItem.value.id = item.id
      curOptionItem.value.sort = item.sort
      showDialog.value = true
    }

    //确定
    async function dialogConfirm() {
      if (!curOptionItem.value.sort) {
        message.warn('请输入排序')
        return
      }
      try {
        dialogLoading.value = true
        await cinemaApi.setMoiveBannerSort(curOptionItem.value)
        showDialog.value = false
        refresh()
      } finally {
        dialogLoading.value = false
      }
    }

    //手动同步
    async function handleSync() {
      try {
        syncLoading.value = true
        await cinemaApi.syncMoiveBanner()
        message.success('同步成功')
        refresh()
      } finally {
        syncLoading.value = false
      }
    }

    //禁用/启用
    function handleDisable(data) {
      showConfirm({
        content: data.status == 1 ? '确认禁用该Banner？' : '确认启用该Banner？',
        onOk: async () => {
          try {
            await cinemaApi.upDownMoiveBanner(data.id)
            refresh()
          } catch (error) {}
        }
      })
    }

    return {
      tableRef,
      tableConfig,
      curOptionItem,
      showDialog,
      dialogLoading,
      syncLoading,

      handleSort,
      dialogConfirm,
      handleSync,
      handleDisable
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            bannerImage: ({ row }) => <Image src={row.banner}></Image>,
            addStyle: () => (
              <Button
                loading={this.syncLoading}
                type="primary"
                onClick={this.handleSync}
              >
                手动同步
              </Button>
            ),
            status: ({ row }) => {
              return (
                <Space>
                  {row.status == 0 ? (
                    <TypographyText type="danger">禁用</TypographyText>
                  ) : (
                    <TypographyText type="success">启用</TypographyText>
                  )}
                </Space>
              )
            },
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleSort(row)}
                >
                  设置排序
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDisable(row)}
                >
                  {row.status == 1 ? '禁用' : '启用'}
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showDialog}
          width={600}
          confirmLoading={this.dialogLoading}
          title="设置排序"
          destroyOnClose
          onOk={this.dialogConfirm}
        >
          <Form labelCol={{ span: 4 }} style={{ marginTop: '15px' }}>
            <FormItem label={'排序'} required>
              <InputNumber
                placeholder={'请输入'}
                v-model:value={this.curOptionItem.sort}
                style={{ width: '300px' }}
                min={1}
                maxlength={5}
              />
              <p style={{ marginTop: '10px', color: '#888' }}>
                请输入大于等于1的整数，值越小排前面
              </p>
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
})
